<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>开启新鲜蔬果时光</title>
    <style type="text/css">
        #a1 {
            width: 600px;
            height: 800px;
            top: 0px;
            left: 0px;
            float: left;
        }

        #a3 {
            width: 800px;
            height: 800px;
            float: left;
        }

        #a4 {
            width: 800px;
            height: 40px;
            text-indent: 600px;
            line-height: 40px;
        }

        #s1 {
            color: #A9A9A9;
        }
        #s11 {
            color: #A9A9A9;
        }

        #a5 {
            width: 800px;
            height: 170px;
            text-indent: 250px;
        }

        #s2 {
            font-size: 40px;

        }

        #s3 {
            font-size: 30px;
            line-height: 10px;
        }

        #a6 {
            width: 800px;
            height: 90px;
        }

        #t1 {
            line-height: 30px;
            margin-top: 35px;
            margin-left: 250px;
        }

        #t2 {
            line-height: 30px;
            margin-top: 30px;
            margin-left: 250px;
        }

        #select {
            width: 160px;
            height: 40px;
            margin-left: 250px;
        }

        #t3 {
            height: 34px;
        }

        #s4 {
            font-size: 12px;
            color: #A9A9A9;
        }

        .a7 {
            width: 800px;
            height: 100px;
        }

        #t4 {
            width: 446px;
            height: 80px;
            background-color: #0274ff;
            margin-left: 250px;
            font-size: 35px;
            line-height: 35px;
            border: 0px;
            border-radius: 6;
            color: #FFFFFF;
        }

        #a8 {
            width: 800px;
            height: 60px;
            text-indent: 250px;
        }

        #s5 {
            font-size: 14px;
            color: #CCCCCC;
        }

        #a9 {
            width: 800px;
            height: 20px;
            text-indent: 680px;
        }

        #a10 {
            text-decoration: none;
        }

        #a10:hover {
            color: #ff0000;
        }
    </style>
</head>
<body>
<div id="ctr" style="width: 100%;height: 800px">
    <div id="ct" style="width: 1400px;height: 800px;margin: auto">
        <div id="a1">
            <img src="jsp/511.png" id="im" onmouseover="xz()" onmouseout="le()">
        </div>
        <div id="a3">
            <div id="a4">
                <span id="s1" onmouseover="puser()">用户注册</span>&nbsp;&nbsp;&nbsp;&nbsp;
                <span id="s11" onmouseover="suser()">商家注册</span>
            </div>
            <div id="a5">
                <br>
                <pre id="s2">欢迎注册蔬果集市</pre>
                <pre id="s3">新鲜果蔬，乐享品质生活</pre>
            </div>
            <div id="puser" style="width: 800px;height: 360px">
                <form action="/register" method="post">
                    <div id="a6">
                        <input type="text" name="username" id="t1" value="" size="70" placeholder="用户名"/>
                    </div>
                    <div id="a6">
                        <input type="password" name="password" id="t2" value="" size="70" placeholder="密码"/>
                    </div>
                    <div id="a6">
                        <select name="" id="select">
                            <option value="">中国 +86</option>
                            <option value="">中国香港特别行政区 +852</option>
                            <option value="">中国澳门特别行政区 +853</option>
                            <option value="">中国台湾地区 +886</option>
                        </select>
                        <input type="text" name="phonenumber" id="t3" placeholder="手机号码" size="42" onblur="sjh()"/>&nbsp;&nbsp;<span
                            id="y"></span><br>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span id="s4">可通过该手机号找回密码</span>
                    </div>
                    <div class="a7">
                        <input type="submit" id="t4" value="立即注册"/>
                    </div>
                </form>
            </div>
            <div id="suser" style="width: 800px;height: 360px;display: none">
                <form action="/superregister" method="post">
                    <div id="a6">
                        <input type="text" name="username" id="t1" value="" size="70" placeholder="用户名"/>
                    </div>
                    <div id="a6">
                        <input type="password" name="password" id="t2" value="" size="70" placeholder="密码"/>
                    </div>
                    <div id="a6">
                        <select name="" id="select">
                            <option value="">中国 +86</option>
                            <option value="">中国香港特别行政区 +852</option>
                            <option value="">中国澳门特别行政区 +853</option>
                            <option value="">中国台湾地区 +886</option>
                        </select>
                        <input type="text" name="phonenumber" id="t3" placeholder="手机号码" size="42" onblur="sjh()"/>&nbsp;&nbsp;<span
                            id="y"></span><br>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span id="s4">可通过该手机号找回密码</span>
                    </div>
                    <div class="a7">
                        <input type="submit" id="t4" value="商家注册"/>
                    </div>
                </form>
            </div>
            <div id="a8">
                <input type="checkbox" name="select" id="t5" value=""/>
                <span id="s5">我已阅读并同意相关服务条款和隐私政策</span>
            </div>
            <div style="width: 800px;height: 140px"></div>
            <div id="a9">
                <a href="index.html" id="a10"><span>返回首页</span></a>
            </div>
        </div>
    </div>
</div>

</body>

<script type="text/javascript">
    var x = ["jsp/511.png", "jsp/120.png", "jsp/121.png", "jsp/122.png"];
    var i = 0;

    function lb() {
        document.getElementById("im").src = x[i];
        i++;
        if (i == x.length) {
            i = 0;
        }
    }

    t = window.setInterval(lb, 2000);

    function xz() {
        window.clearInterval(t);
    }

    function le() {
        t = window.setInterval(lb, 2000);
    }

    function sjh() {
        var reg = /^1[3,5,6,,7,8,9]\d{9}/;
        var sr = document.getElementById("t3").value;
        var wz;
        if (reg.test(sr) && sr.length == 11) {
            wz = "√";
        } else {
            wz = "×";
        }
        document.getElementById("y").innerHTML = wz;
    }

    function puser() {
        document.getElementById("s1").style.color = "red";
        document.getElementById("s11").style.color = "#A9A9A9";
        document.getElementById("puser").style.display = "block";
        document.getElementById("suser").style.display = "none";
    }
    function suser() {
        document.getElementById("s11").style.color = "red";
        document.getElementById("s1").style.color = "#A9A9A9";
        document.getElementById("puser").style.display = "none";
        document.getElementById("suser").style.display = "block";
    }
</script>
</html>
